<!--
 * @Author: Dorange.Wang
 * @Date: 2021-05-13 10:04:47
 * @LastEditors: your name
 * @LastEditTime: 2021-09-24 10:27:31
 * @Description: file content
-->
<route>
{
  "meta":{
    "title":"数据源",
    "showMenu":true,
    "serialNum": 35
  }
}
</route>

<template>
  <div>
    <el-row :gutter="12">
      <el-col :span="6">
        <el-input
          v-model="queryData.key"
          placeholder="数据源Key"
          clearable
          :maxlength="28"
          prefix-icon="el-icon-search"
        />
      </el-col>

      <el-col :span="6">
        <el-input
          v-model="queryData.searchKey"
          placeholder="数据源Key或数据源名称"
          clearable
          :maxlength="64"
          prefix-icon="el-icon-search"
        />
      </el-col>

      <el-col :span="6">
        <el-button type="primary" @click="loadData(1)">查询</el-button>
        <el-button @click="handleReset">重置</el-button>
      </el-col>

      <el-col :span="24" class="mt10">
        <DropdownButtons
          :buttons="[
            {
              icon: 'el-icon-circle-plus-outline',
              command: 'datasource',
              title: '新建数据源',
            },
            {
              icon: 'el-icon-upload2',
              command: 'importDatasource',
              title: '导入数据源',
              upload: {
                accept: '.hm_datasource',
                httpRequest: handleHttpRequest,
              },
            },
          ]"
          @command="handleCreate"
        />
      </el-col>
    </el-row>
    <el-table
      class="mt10 ds-table"
      :data="tableData"
      v-loading="loading"
      style="width: 100%"
      current-row-key="id"
      stripe
      border
    >
      <el-table-column type="expand">
        <template slot-scope="scope">
          <el-row :gutter="12">
            <el-col :span="8" v-for="item in scope.row.envList" :key="item.env">
              <el-card
                class="mb10"
                v-if="getEnvActive(item.env)"
                shadow="never"
              >
                <div class="ds-table_env-title">
                  {{ getEnvName(item.env) }}
                </div>
                <el-form inline class="ds-table_env-info">
                  <el-form-item label="地址"> {{ item.host }} </el-form-item>
                  <el-form-item label="端口"> {{ item.port }} </el-form-item>
                  <el-form-item label="数据库">
                    {{ item.databaseName }}
                  </el-form-item>
                  <el-form-item label="用户名">
                    {{ item.username }}
                  </el-form-item>
                  <el-form-item label="密码">
                    {{ item.password }}
                  </el-form-item>
                </el-form>
              </el-card>
            </el-col>
          </el-row>
        </template>
      </el-table-column>
      <el-table-column prop="key" label="数据源Key">
        <template slot-scope="scope">
          {{ scope.row.key }}
          <el-button
            style="margin-left: 10px"
            type="text"
            @click="copy(scope.row.key)"
            icon="el-icon-document-copy"
          ></el-button>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="数据源名称" />
      <el-table-column prop="type" label="数据源类型" width="200">
        <template slot-scope="scope">
          {{ scope.row.type | dsType }}
        </template>
      </el-table-column>
      <el-table-column prop="remark" label="数据源描述" />
      <el-table-column prop="modifyDate" label="更新时间" width="200">
        <template slot-scope="scope">
          {{ scope.row.modifyDate | moment }}
        </template>
      </el-table-column>
      <el-table-column prop="actions" label="操作" width="150">
        <template slot-scope="scope">
          <span class="table-actionItem"
            ><el-button type="text" @click="handleEdit(scope.row)"
              >编辑</el-button
            ></span
          >
          <span class="table-actionItem">
            <el-popconfirm
              title="确定要删除该数据源吗？"
              placement="top"
              @confirm="handleDelete(scope.row)"
            >
              <el-button class="link-danger" type="text" slot="reference"
                >删除</el-button
              >
            </el-popconfirm>
          </span>
          <span class="table-actionItem"
            ><el-button type="text" @click="handleExport(scope.row)"
              >导出</el-button
            ></span
          >
        </template>
      </el-table-column>
    </el-table>
    <div class="tr mt24">
      <x-pagination
        :total="total"
        :pageSize.sync="pageData.pageSize"
        :pageNo.sync="pageData.pageNo"
        @search="loadData()"
      />
    </div>
    <DataSourceForm ref="DataSourceForm" />
  </div>
</template>

<script>
import DataSourceForm from "./__components__/DataSourceForm";
import {
  getHmdatasourcePageList,
  deleteHmdatasource,
  getHmdatasourceExport,
  postHmdatasourceImport,
} from "@/apis/paas/HmDatasourceController.js";
import { getHmenvironmentList } from "@/apis/paas/HmEnvironmentController.js";
import { copy, exportAppDataFromJson } from "@/utils/util";
import DropdownButtons from "@/components/DropdownButtons/Index.vue";
export default {
  name: "DataSource",
  components: {
    DataSourceForm,
    DropdownButtons,
  },

  data() {
    return {
      copy,
      loading: false,
      queryData: {},
      envConfigList: [],
      pageData: {
        pageSize: 10,
        pageNo: 1,
      },
      tableData: [],
      total: 0,
    };
  },

  created() {
    this.loadAllData();
  },

  methods: {
    async loadAllData() {
      this.envConfigList = await getHmenvironmentList({ hidden: 0 });
      this.loadData();
    },
    loadData(pageNo = this.pageData.pageNo) {
      getHmdatasourcePageList({
        ...this.queryData,
        ...this.pageData,
        pageNo,
      }).then((res) => {
        if (res.data.length === 0 && pageNo > 1) {
          this.loadData(pageNo - 1);
          return;
        }
        this.tableData = res.data;
        this.total = res.totalCount;
        this.pageData = {
          pageSize: res.pageSize,
          pageNo: res.pageNo,
        };
      });
    },

    handleReset() {
      this.queryData = {};
      this.loadData(1);
    },

    handleCreate(command) {
      if (command === "datasource") {
        this.$refs.DataSourceForm.open(undefined, () => {
          this.loadData(1);
          this.$message.success("操作成功");
        });
      }
    },

    handleEdit(record) {
      this.$refs.DataSourceForm.open(record, () => {
        this.loadData();
        this.$message.success("操作成功");
      });
    },

    handleDelete(record) {
      deleteHmdatasource([record.id]).then((res) => {
        this.loadData();
        this.$message.success("操作成功");
      });
    },
    getEnvActive(env) {
      const envItem = this.envConfigList.find((item) => item.key === env);
      return envItem && envItem.hidden === 0;
    },
    getEnvName(env) {
      const envItem = this.envConfigList.find((item) => item.key === env);
      return envItem.name;
    },

    /**
     * 导出
     * @param {*} record
     */
    async handleExport(record) {
      const res = await getHmdatasourceExport({
        id: record.id,
      });
      await exportAppDataFromJson({
        data: res,
        key: record.key,
        ext: "hm_datasource",
      });

      setTimeout(() => {
        this.$message.success("导出成功");
      }, 1500);
    },

    /**
     * 导入
     * @param {*} file
     */
    async handleHttpRequest(file) {
      const formData = new FormData();
      formData.append("file", file.file);
      await postHmdatasourceImport(formData);
      this.$message.success("导入成功");
      this.loadData(1);
    },
  },
};
</script>

<style lang="scss" scoped>
.ds-table {
  &_env-title {
    line-height: 32px;
    font-weight: bold;
  }

  &_env-info .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 100%;

    ::v-deep label {
      width: 90px;
      color: #99a9bf;
      line-height: 24px;
      font-size: 12px;
      flex: none;
    }
    ::v-deep .el-form-item__content {
      line-height: 24px;
      font-size: 12px;
      flex: 1;
      word-break: break-all;
    }
  }
}
</style>
